<template>
    <div class="report">
        <div class="left-nav">
            <el-row class="tac">
                <el-col :span="12">
                    <el-menu
                    :router="true"
                    default-active="1"
                    class="el-menu-vertical-demo"
                    unique-opened
                    @open="handleOpen"
                    @close="handleClose">

                    <!-- 安全辅助驾驶报表 -->
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-s-claim"></i>
                                <span>安全辅助驾驶报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">安全辅助驾驶证据表</el-menu-item>
                                <el-menu-item index="1-2">安全辅助驾驶汇总表</el-menu-item>
                                <el-menu-item index="1-3">安全辅助驾驶明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 驾驶行为分析 -->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-s-help"></i>
                                <span>驾驶行为分析</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="2-1">驾驶行为统计</el-menu-item>
                                <el-menu-item index="2-2">驾驶行为查询</el-menu-item>
                                <el-menu-item index="2-3">行驶轨迹明细表</el-menu-item>
                                <el-menu-item index="2-4">轨迹超速汇总表</el-menu-item>
                                <el-menu-item index="2-5">轨迹超速明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- G-Sensor报表 -->
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-odometer"></i>
                                <span>G-Sensor报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="3-1">G-Sensor报警统计</el-menu-item>
                                <el-menu-item index="3-2">G-Sensor报警明细</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 司机报表 -->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-warning"></i>
                                <span>司机报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="4-1">驾驶员身份识别报表</el-menu-item>
                                <el-menu-item index="4-2">司机打卡汇总表</el-menu-item>
                                <el-menu-item index="4-3">司机打卡明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 上下线报表 -->
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-sort"></i>
                                <span>上下线报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="5-1">上下线汇总报表</el-menu-item>
                                <el-menu-item index="5-2">上下线明细报表</el-menu-item>
                                <el-menu-item index="5-3">上线率统计报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 报警报表 -->
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-message-solid"></i>
                                <span>报警报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="6-1">警情统计</el-menu-item>
                                <el-menu-item index="6-2">警情查询</el-menu-item>
                                <el-menu-item index="6-3">报警处置统计表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 里程报表 -->
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-odometer"></i>
                                <span>里程报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="7-1">里程汇总报表</el-menu-item>
                                <el-menu-item index="7-2">里程日/月汇总报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 行车报表 -->
                        <el-submenu index="8">
                            <template slot="title">
                                <i class="el-icon-truck"></i>
                                <span>行车报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="8-1">夜间行车汇总报表</el-menu-item>
                                <el-menu-item index="8-2">夜间行车明细报表</el-menu-item>
                                <el-menu-item index="8-3">停车汇总报表</el-menu-item>
                                <el-menu-item index="8-4">停车明细报表</el-menu-item>
                                <el-menu-item index="8-5">ACC点火统计</el-menu-item>
                                <el-menu-item index="8-6">ACC点火查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 电子围栏报表 -->
                        <el-submenu index="9">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>电子围栏报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="9-1">电子围栏统计</el-menu-item>
                                <el-menu-item index="9-2">电子围栏查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 油量报表 -->
                        <el-submenu index="10">
                            <template slot="title">
                                <i class="el-icon-odometer"></i>
                                <span>油量报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="10-1">油量汇总表</el-menu-item>
                                <el-menu-item index="10-2">油量动态明细表</el-menu-item>
                                <el-menu-item index="10-3">油量异常明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 故障报警报表 -->
                        <el-submenu index="11">
                            <template slot="title">
                                <i class="el-icon-warning"></i>
                                <span>故障报警报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="11-1">故障报警统计</el-menu-item>
                                <el-menu-item index="11-2">故障报警查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 视频报警报表 -->
                        <el-submenu index="12">
                            <template slot="title">
                                <i class="el-icon-video-camera-solid"></i>
                                <span>视频报警报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="12-1">视频报警统计</el-menu-item>
                                <el-menu-item index="12-2">视频报警查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- IO报警报表 -->
                        <el-submenu index="13">
                            <template slot="title">
                                <i class="el-icon-message-solid"></i>
                                <span>IO报警报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="13-1">IO报警统计</el-menu-item>
                                <el-menu-item index="13-2">IO报警查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 存储介质报表 -->
                        <el-submenu index="14">
                            <template slot="title">
                                <i class="el-icon-coin"></i>
                                <span>存储介质报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="14-1">硬盘错误报警明细表</el-menu-item>
                                <el-menu-item index="14-2">硬盘超温报警明细表</el-menu-item>
                                <el-menu-item index="14-3">硬盘状态信息明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 设备升级报表 -->
                        <el-submenu index="15">
                            <template slot="title">
                                <i class="el-icon-sell"></i>
                                <span>设备升级报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="15-1">车辆版本明细表</el-menu-item>
                                <el-menu-item index="15-2">设备离线升级记录报表</el-menu-item>
                                <el-menu-item index="15-3">设备自动升级记录报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 多媒体 -->
                        <el-submenu index="16">
                            <template slot="title">
                                <i class="el-icon-data-analysis"></i>
                                <span>多媒体</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="16-1">图片</el-menu-item>
                                <el-menu-item index="16-2">音频</el-menu-item>
                                <el-menu-item index="16-3">视频</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 数据查询 -->
                        <el-submenu index="17">
                            <template slot="title">
                                <i class="el-icon-search"></i>
                                <span>数据查询</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="17-1">上报信息查询</el-menu-item>
                                <el-menu-item index="17-2">下发信息明细报表</el-menu-item>
                                <el-menu-item index="17-3">行驶记录仪查询报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 用户行为分析 -->
                        <el-submenu index="18">
                            <template slot="title">
                                <i class="el-icon-document"></i>
                                <span>用户行为分析</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="18-1">在线时长统计</el-menu-item>
                                <el-menu-item index="18-2">用户登录明细</el-menu-item>
                                <el-menu-item index="18-3">用户操作日志</el-menu-item>
                                <el-menu-item index="18-4">用户操作汇总</el-menu-item>
                                <el-menu-item index="18-5">用户媒体明细</el-menu-item>
                                <el-menu-item index="18-6">用户媒体汇总</el-menu-item>
                                <el-menu-item index="18-7">用户查询主动安全报表日志</el-menu-item>
                                <el-menu-item index="18-8">车辆维护和变更记录</el-menu-item>
                                <el-menu-item index="18-9">设备变更报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 客流统计报表 -->
                        <el-submenu index="19">
                            <template slot="title">
                                <i class="el-icon-s-custom"></i>
                                <span>客流统计报表（外设）</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="19-1">客流统计汇总</el-menu-item>
                                <el-menu-item index="19-2">客流统计查询</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 温度报表 -->
                        <el-submenu index="20">
                            <template slot="title">
                                <i class="el-icon-hot-water"></i>
                                <span>温度报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="20-1">温度报警统计</el-menu-item>
                                <el-menu-item index="20-2">温度动态明细表</el-menu-item>
                                <el-menu-item index="20-3">温度超温明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 定位数据分析报表 -->
                        <el-submenu index="21">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>定位数据分析报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="21-1">车辆离线明细报表</el-menu-item>
                                <el-menu-item index="21-2">车辆定位合格率报表</el-menu-item>
                                <el-menu-item index="21-3">车辆漂移统计表</el-menu-item>
                                <el-menu-item index="21-4">车辆漂移明细表</el-menu-item>
                                <el-menu-item index="21-5">车辆轨迹完整率报表</el-menu-item>
                                <el-menu-item index="21-6">车辆轨迹不连续报表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 渣土车 -->
                        <el-submenu index="22">
                            <template slot="title">
                                <i class="el-icon-warning"></i>
                                <span>渣土车</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="22-1">运行状态明细表</el-menu-item>
                                <el-menu-item index="22-2">载重超载报警汇总表</el-menu-item>
                                <el-menu-item index="22-3">载重超载报警明细表</el-menu-item>
                                <el-menu-item index="22-4">区域非法开盖汇总表</el-menu-item>
                                <el-menu-item index="22-5">区域非法开盖明细表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 客流统计报表 -->
                        <el-submenu index="23">
                            <template slot="title">
                                <i class="el-icon-s-custom"></i>
                                <span>客流统计报表（报警）</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="23-1">客流统计明细表</el-menu-item>
                                <el-menu-item index="23-2">客流统计汇总表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <!-- 胎压检测报表 -->
                        <el-submenu index="24">
                            <template slot="title">
                                <i class="el-icon-warning"></i>
                                <span>胎压检测报表</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="24-1">胎压报警汇总表</el-menu-item>
                                <el-menu-item index="24-2">胎压报警明细表</el-menu-item>
                                <el-menu-item index="24-3">胎压状态明细表</el-menu-item>
                                <el-menu-item index="24-4">胎压历史曲线表</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
.left-nav{
    position: absolute;
    left: 0;
    right: 1190px;
    top: 0;
    bottom: 0;
    background-color: pink;
    overflow-y: auto;
}
.el-row, .el-col{
    width: 100%;
}
</style>